<div id="homeslide" class="slidezone">
    <? 
    $slides = glob('data/home/slide-'.LANG.'*');
    if($slides) foreach($slides as $i): ?>
    <a href="/account/join" title="<?=TITLE?>"><img src="http://<?=COOKIELESS?>/<?=$i?>" alt="<?=TITLE?>"/></a>
    <?endforeach;?>
</div>
<script src="http://<?=COOKIELESS?>/apps/home/lib/slidezone.js"></script>
<script>
    // CUSTOM EFFECT
    var sleep;
    $('#homeslide').slidezone({
        delay	    : 5000,
        slideOut    : function(){ 
            $('#homeslide').find('div.mask:visible')
            .each(function(){ 
                var rand = Math.random() *10 % 18;
                $(this).delay(rand *100).animate({
                    opacity:'0'
                },600,function(){
                    $(this).remove();
                })
            }
        );
        },
        slideIn     : function(slide, active){
            var src = active.find('img').attr('src');
            for(var rows = 0; rows < 6; rows++){
                for(var cols = 0; cols < 18; cols++){
                    var rand = Math.random() *10 % 18;
                    slide.append(
                    $('<div class="mask">').css({ 
                        position:'absolute',
                        opacity:0,
                        left:(50*cols), 
                        top:(50*rows),
                        width:50,
                        height:50,
                        background: 'url("'+ src +'") no-repeat -'+ (cols *50) +'px -'+ (rows *50) +'px'
                    }).delay(rand *100).animate({
                        opacity:'1'
                    },800)
                );
                }
            }
        }
    });
</script>